{% extends 'base.html' %}
{% set src = App.Users.userData %}
{% block body %}
{# Settings modal #}
<div class='modal fade' id='schedulerSettingsModal' tabindex='-1' role='dialog' aria-labelledby='schedulerSettingsModalLabel'>
  <div class='modal-dialog' role='document'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h4 class='modal-title' id='schedulerSettingsModalLabel'><i class='fas fa-fw fa-calendar-days'></i> {{ 'Scheduler settings'|trans }}</h4>
        <button type='button' class='close' data-dismiss='modal' aria-label='{{ 'Close'|trans }}'>
          <span aria-hidden='true'>&times;</span>
        </button>
      </div>
      <div class='modal-body'>
        {# schedulerSettings #}
        <div class='mb-2'>
          {% include 'binary-setting.html' with {'label': 'Show weekends'|trans, 'model': 'users/me', 'slug': 'show_weekends', 'src': src} %}
          {% include 'binary-setting.html' with {'label': 'Layout: timeline'|trans, 'model': 'users/me', 'slug': 'scheduler_layout', 'src': src} %}
        </div>
      </div>

      <div class='modal-footer'>
        <button type='button' class='btn btn-secondary' data-action='reload-page'>{{ 'Close'|trans }}</button>
      </div>
    </div>
  </div>
</div>
{# Exports modal #}
<div class='modal fade' id='schedulerExportsModal' tabindex='-1' role='dialog' aria-labelledby='schedulerExportsModalLabel'>
  <div class='modal-dialog' role='document'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h4 class='modal-title' id='schedulerExportsModalLabel'><i class='fas fa-fw fa-calendar-days'></i>{{ 'Export bookings'|trans }}</h4>
        <button type='button' class='close' data-dismiss='modal' aria-label='{{ 'Close'|trans }}'>
          <span aria-hidden='true'>&times;</span>
        </button>
      </div>
      <div class='modal-body'>
        {# schedulerExports #}
        <div class='pl-3'>
          <div class='d-flex justify-content-between'>
            <label for='schedulerDateFrom' class='col-form-label'>{{ 'Start date'|trans }}</label>
            <input id='schedulerDateFrom' name='schedulerDateFrom' type='date' class='form-control col-md-6' value='{{ "1 month ago"|date('Y-m-d') }}'/>
          </div>
          <div class='d-flex justify-content-between mt-2'>
            <label for='schedulerDateTo' class='col-form-label'>{{ 'End date'|trans }}</label>
            <input id='schedulerDateTo' name='schedulerDateTo' type='date' class='form-control col-md-6' value='{{ "now"|date('Y-m-d') }}'/>
          </div>
        </div>
        <p class='smallgray pl-3 mt-4'>{{ 'Note: the export reflects the current scheduler view, including all active filters.'|trans }}</p>
      </div>
      <div class='modal-footer'>
        <button type='button' class='btn btn-secondary' data-dismiss='modal'>{{ 'Close'|trans }}</button>
        <button type='button' class='btn btn-primary' data-action='export-scheduler' aria-label='{{ 'Export'|trans }}'>{{ 'Export'|trans }}</button>
      </div>
    </div>
  </div>
</div>
{# Modal for event click #}
<div class='modal fade' id='eventModal' tabindex='-1' role='dialog' aria-labelledby='eventModalLabel'>
  <div class='modal-dialog modal-lg' role='document'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h5 class='modal-title' id='eventModalLabel'>{{ 'Edit event'|trans }}</h5>
        <button type='button' class='close' data-dismiss='modal' aria-label='{{ 'Close'|trans }}'>
          <span aria-hidden='true'>&times;</span>
        </button>
      </div>
      <div class='modal-body' data-wait='{{ 'Please wait…'|trans }}'>
        {# "placeholder" will be replaced with real title by js #}
        <label for='eventTitle'>{{ 'Comment'|trans }}</label>
        <div class='input-group'>
          {# a data-eventid will get added to this element by js #}
          <input class='form-control' type='text' id='eventTitle' value='placeholder' />
          <div class='input-group-append'>
            <button class='btn btn-primary' data-action='save-event-title' type='button'>{{ 'Save'|trans }}</button>
          </div>
        </div>
        <hr>
        {# START AND END TIMES #}
        <div class='mt-2'>
          <label for='schedulerEventModalStart'>{{ 'Start time'|trans }}</label>
          <input id='schedulerEventModalStart' class='form-control' type='datetime-local' data-what='start_epoch' value='' />
          <label for='schedulerEventModalEnd'>{{ 'End time'|trans }}</label>
          <input id='schedulerEventModalEnd' class='form-control' type='datetime-local' data-what='end_epoch' value='' />
        </div>

        {# BIND EXPERIMENT #}
        <div class='mt-2'>
          <i class='fas fa-link mr-1'></i><h5 class='d-inline' id='bindExpInputLabel'>{{ 'Bind an experiment'|trans }}</h5>
          <div id='eventBoundExp'></div>
          <button data-action='scheduler-rm-bind' data-type='experiment' data-eventid='' class='btn btn-sm btn-danger mb-2' type='button'>{{ 'Unbind'|trans }}</button>
            <div class='input-group mb-3'>
              <div class='input-group-prepend'>
                <span class='input-group-text'>{{ 'Search'|trans }}</span>
              </div>
              <input type='text' data-action='autocomplete' data-target='experiments' data-identifier='binddivexp' class='form-control bindInput' aria-labelledby='bindExpInputLabel' />
              <div class='input-group-append'>
                <button class='btn btn-primary' data-input='bindexpinput' data-action='scheduler-bind-entity' data-type='experiment' type='button'>{{ 'Attach'|trans }}</button>
              </div>
            </div>
            <div id='autocompleteAnchorDiv_binddivexp'></div>
        </div>
        {# BIND ITEM #}
        <div class='mt-2'>
          <i class='fas fa-link mr-1'></i><h5 class='d-inline' id='bindItemInputLabel'>{{ 'Bind a resource'|trans }}</h5>
          <div id='eventBoundDb'></div>
          <button data-action='scheduler-rm-bind' data-type='item_link' data-eventid='' class='btn btn-sm btn-danger mb-2' type='button'>{{ 'Unbind'|trans }}</button>
            <div class='input-group mb-3'>
              <div class='input-group-prepend'>
                <span class='input-group-text'>{{ 'Search'|trans }}</span>
              </div>
              <input type='text' data-action='autocomplete' data-target='items' data-identifier='binddivdb' class='form-control bindInput' aria-labelledby='bindItemInputLabel' />
              <div class='input-group-append'>
                <button class='btn btn-primary' data-input='binddbinput' data-action='scheduler-bind-entity' data-type='item_link' type='button'>{{ 'Attach'|trans }}</button>
              </div>
            </div>
            <div id='autocompleteAnchorDiv_binddivdb'></div>
        </div>

        {# only show the cancel block if item is cancellable or user is admin #}
        <div id='isCancellableDiv' data-is-admin='{{ App.Users.isAdmin ? 'true' : 'false' }}'>
          <h5>{{ 'Cancel booking slot'|trans }}</h5>
          <h6><label for='cancelEventTextarea'>{{ 'Add a custom message'|trans }}</label></h6>
            <textarea id='cancelEventTextarea' class='form-control'></textarea>
            <label>{{ 'Send to'|trans }}</label>
            <div class='form-check'>
              {# data targetid is populated when the modal is open, for each event #}
              <input class='form-check-input' type='radio' name='targetCancelEvent' data-targetid='' value='bookable_item' id='targetCancelEventUsers' checked> <label class='form-check-label' for='targetCancelEventUsers'>{{ 'Past and future users who booked this resource'|trans }}</label>
            </div>
            <div class='form-check'>
              <input class='form-check-input' type='radio' name='targetCancelEvent' data-targetid='{{ App.Teams.teamArr.id }}' value='team' id='targetCancelEventTeam'> <label class='form-check-label' for='targetCancelEventTeam'>{{ 'Members of team %s'|trans|format(App.Teams.teamArr.name) }}</label>
            </div>
            {% for teamgroup in teamGroupsArr %}
              <div class='form-check'>
                <input class='form-check-input' type='radio' name='targetCancelEvent' data-targetid='{{ teamgroup.id }}' value='teamgroup' id='targetCancelEventTeamgroup_{{ teamgroup.id }}'> <label class='form-check-label' for='targetCancelEventTeamgroup_{{ teamgroup.id }}'>{{ 'Members of teamgroup %s'|trans|format(teamgroup.name) }}</label>
              </div>
            {% endfor %}
            <div class='mt-2'>
              <button type='button' data-action='cancel-event-with-message' data-dismiss='modal' data-id='' class='btn btn-danger cancelEventBtn'>{{ 'Send message and cancel'|trans }}</button>
              {# here we use Cancel booking instead of just Cancel so we can have a specific translated term in German #}
              <button type='button' data-action='cancel-event' data-dismiss='modal' data-id='' class='btn btn-danger cancelEventBtn'>{{ 'Cancel booking'|trans }}</button>
          </div>
        </div>
      </div>
      <div class='modal-footer'>
        <button type='button' class='btn btn-secondary' data-dismiss='modal'>{{ 'Close'|trans }}</button>
      </div>
    </div>
  </div>
</div>

  <div>{{ 'Book a resource by clicking on the scheduler.'|trans }}</div>
  <hr>

  {# FILTERS #}
  <div class='d-flex flex-row justify-content-between flex-wrap'>
    {# LEFT PART: filter resources #}
    <div class='flex-row align-items-center' style='max-width:50%;'>
      <p class='smallgray'>{{ 'Select a scope and search bookable resources.'|trans }}</p>
      <div class='d-flex flex-row'>
        {#  TODO: make scopeBtn work without full page reload #}
        {# RESOURCES SCOPE #}
        {% include 'scope-button.html' with {'reload': 'page', 'target': 'scope_items'} %}
        {# FILTERS GROUP CATEGORY AND RESOURCE #}
        {% include 'scheduler-filter-items.html' %}
      </div>
    </div>

    {# MIDDLE PART: events filters #}
    <div class='flex-row align-items-center'>
      <p class='smallgray'>{{ 'Select a scope and search for events.'|trans }}</p>
      <div class='d-flex flex-row'>
        {# EVENTS SCOPE #}
        {# If an item is selected, it's forced to 'Everything' and disabled #}
        <div id='scopeLocked' class='btn-group' hidden>
          <button disabled class='btn dropdown-toggle' type='button' aria-label='Scope' title='Scope'><i class='fas fa-globe fa-fw mr-1'></i></button>
        </div>
        {% include 'scope-button.html' with {'btnId': 'scopeEventBtn', 'reload': 'page', 'target': 'scope_events'} %}
        <div class='input-group ml-2'>
          {#  FILTER BY OWNER #}
          <input type='text' aria-label='{{ 'Filter owner'|trans }}' placeholder='{{ 'Filter events by owner'|trans }}' id='eventOwnerSelect' class='form-control' data-identifier='eventOwnerSelect' data-action='autocomplete' data-target='users'>
          <div id='autocompleteAnchorDiv_eventOwnerSelect'></div>
          <div class='input-group-append'>
            <button class='btn btn-secondary' type='button' aria-label='{{ 'Filter owner'|trans }}' data-action='filter-owner' title='{{ 'Filter owner'|trans }}'><i class='color-white fas fa-magnifying-glass'></i></button>
          </div>
        </div>
      </div>
    </div>

    {# RIGHT PART: SETTINGS #}
    {# div is necessary to prevent the link being too high, align-self-end to put it at bottom #}
    <div class='align-self-end'>
      <a href='#' data-action='toggle-modal' data-target='schedulerSettingsModal' aria-label='{{ 'Settings'|trans }}' title='{{ 'Settings'|trans }}' class='btn p-2 hl-hover-gray lh-normal border-0'>
        <i class='fas fa-cogs fa-fw'></i>
      </a>
      <button type='button' data-action='toggle-modal' data-target='schedulerExportsModal' class='btn btn-secondary' aria-label='{{ 'Export'|trans }}' title='{{ 'Export'|trans }}'>
        {{ 'Export'|trans }}
      </button>
    </div>
  </div>
  <div id='selectedItemsContainer' class='m-4 d-none'>
    <strong class='d-block mb-2'>{{ 'Selected items:'|trans }}</strong>
    <div id='selectedItemsDisplay' class='d-flex flex-wrap'></div>
  </div>

  <hr>

  <div class='modal fade' id='itemPickerSelectModal' tabindex='-1' aria-labelledby='itemPickerSelectLabel'>
    <div class='modal-dialog modal-lg modal-dialog-centered'>
      <div class='modal-content'>
        <div class='modal-header'>
          <h5 class='modal-title' id='itemPickerSelectLabel'>{{ 'Book item'|trans }}</h5>
          <button type='button' class='close' data-dismiss='modal' aria-label='{{ 'Close'|trans }}'>
            <span aria-hidden='true'>&times;</span>
          </button>
        </div>
        <div class='modal-body mr-2'>
          {% include 'scheduler-filter-items.html' with {'categorySelectId': 'categorySelectModal', 'itemSelectId': 'itemSelectModal', 'itemSelectWrapperId': 'itemSelectWrapperModal', 'itemSelectInputId': 'itemSelectInputModal'} %}
          <div id='selectedItemsContainerModal' class='mt-2 d-none'>
            <strong class='d-block mb-1'>{{ 'Selected items:'|trans }}</strong>
            <div id='selectedItemsDisplayModal' class='d-flex flex-wrap gap-2'></div>
          </div>
        </div>
        <div class='modal-footer'>
          <button type='button' class='btn btn-primary' id='confirmItemSelect'>{{ 'Create event(s)'|trans }}</button>
        </div>
      </div>
    </div>
  </div>

  {# When items have been selected: modal with checkboxes #}
  <div class='modal fade' id='itemPickerReviewModal' tabindex='-1' aria-labelledby='itemPickerReviewLabel'>
    <div class='modal-dialog modal-lg modal-dialog-centered'>
      <div class='modal-content'>
        <div class='modal-header'>
          <h5 class='modal-title' id='itemPickerReviewLabel'>{{ 'Review selected items'|trans }}</h5>
          <button type='button' class='close' data-dismiss='modal' aria-label='{{ 'Close'|trans }}'>
            <span aria-hidden='true'>&times;</span>
          </button>
        </div>
        <div class='modal-body'>
          <div id="selectedItemsCheckboxes">
            {# filled dynamically in JS #}
          </div>
        </div>
        <div class='modal-footer'>
          <button type='button' class='btn btn-primary' id='confirmItemReview'>{{ 'Create event(s)'|trans }}</button>
        </div>
      </div>
    </div>
  </div>
{% if itemsArr|length == 0 %}
  {{ 'No bookable items.'|trans|msg('warning', false) }}
{% else %}
  {# loading spinner #}
  <div class='d-flex justify-content-center' id='loading-spinner'>
    <div class='lds-dual-ring'></div>
  </div>
  <div id='scheduler' data-lang='{{ App.getJsLang }}' data-render='{{ itemsArr|length > 0 ? 'true' : 'false' }}' data-weekends='{{ App.Users.userData.show_weekends }}' data-layout='{{ App.Users.userData.scheduler_layout }}'></div>
{% endif %}

{% endblock body %}
